<template>
  <div>
    <el-container>
      <el-header style="height: 100px;">
        <div class="top-right">
          <div style="width:50%;float: left;">
            <img style="margin: 25px 20px;width:200px;" src="../assets/image/logo.png" alt>
          </div>
          <div style="width:50%;float:right;color:#fff;height:40px;margin-top:30px;">
            <div class="exit-box">
              <span class @click="exit" style="cursor:pointer">退出</span>
            </div>

            <div class="exit-box">
              <i
                @click="modifyInfo"
                class="element-icons icon-user"
                style="font-size: 32px;cursor:pointer"
                title="基本资料"
              ></i>
            </div>
            <div class="exit-box">
              <i
                @click="modifyPassword"
                class="element-icons icon-genggai"
                style="font-size: 30px;line-height: 40px;cursor:pointer"
                title="修改密码"
              ></i>
            </div>
          </div>
        </div>
      </el-header>
      <el-container class="bottom-box">
        <el-aside width="240px">
          <el-menu
            unique-opened
            class="icon-vertical-demo"
            background-color="#fff"
            text-color="#95a0aa"
            active-text-color="#4778e8"
            style="text-align:left"
            :default-active="link"
            router
          >
            <el-menu-item index="inforlist" v-show="false">
              <span slot="title">111</span>
            </el-menu-item>
            <div v-for="(item, index) in menu" v-bind:key="index" class="menu-box">
              <el-submenu v-bind:index="item.index" v-if="item.type == 0">
                <template slot="title">
                  <i v-bind:class="item.class" class="element-icons"></i>
                  <span>{{item.title}}</span>
                  <i
                    class="el-submenu__icon-arrow el-icon-caret-bottom"
                    style="font-size: 16px;color:#b5b5b5"
                  ></i>
                </template>
                <el-menu-item-group v-for="(items, index) in item.submenu" v-bind:key="index">
                  <el-menu-item
                    v-bind:index="items.index"
                    @click="changeMenu(item.title,items.title)"
                  >
                    <i v-bind:class="items.class" class="icon element-icons"></i>
                    <span class="menuCur">{{items.title}}</span>
                  </el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item v-bind:index="item.index" v-if="item.type == 1">
                <i v-bind:class="item.class" class="icon element-icons"></i>
                <span slot="title">{{item.title}}</span>
              </el-menu-item>
            </div>
          </el-menu>
        </el-aside>
        <el-main>
          <el-breadcrumb separator="-" style="margin: 20px;font-size:16px;color:#646464!important">
            <el-breadcrumb-item :to="{ path: '/sorce_list' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{parent}}</el-breadcrumb-item>
            <el-breadcrumb-item>{{child}}</el-breadcrumb-item>
          </el-breadcrumb>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
    <admininfo v-bind:admininfo="admininfo"></admininfo>
    <adminpassword v-bind:adminpassword="adminpassword"></adminpassword>
  </div>
</template>

<script>
import admininfo from "./admin/admininfo.vue";
import adminpassword from "./admin/adminpassword.vue";

export default {
  data() {
    return {
      link: "",
      account: "admin",
      dialogFormVisible: false,
      menu: [
        {
          type: 0,
          index: "1",
          class: "icon-ziyuanguanli",
          title: "资源管理",
          submenu: [
            {
              class: "icon-chanpinguanli",
              index: "sorce_list",
              title: "产品管理"
            },
            {
              class: "icon-Bannerguanli-icon",
              index: "banner_list",
              title: "banner管理"
            }
          ]
        },
        {
          type: 0,
          index: "2",
          class: "icon-yingyongguanli",
          title: "应用管理",
          submenu: [
            { class: "icon-APPguanli", index: "app_list", title: "APP管理" },
            {
              class: "icon-mokuaiguanli",
              index: "module_list",
              title: "模块管理"
            },
            { class: "icon-sucaiguanli", index: "module_file_list", title: "素材管理" }
          ]
        },
        {
          type: 0,
          index: "3",
          class: "icon-shouji",
          title: "H5管理",
          submenu: [
            {
              class: "icon-wodeyemian_wodekecheng",
              index: "my_page_list",
              title: "我的页面"
            }
          ]
        },
        {
          type: 0,
          index: "4",
          class: "icon-tuiguangguanli---",
          title: "推广管理",
          submenu: [
            { class: "icon-user-o", index: "channel_list", title: "渠道列表" },
            {
              class: "icon-tuiguanglianjie",
              index: "link_list",
              title: "推广链接"
            },
            { class: "icon-yemianguanli", index: "page_list", title: "页面管理" },
            { class: "icon-sucaiguanli", index: "matter_list", title: "素材管理" },
            {
              class: "icon-huodongqudaobaobiao",
              index: "channel_report",
              title: "渠道报表"
            },
            { class: "icon-haoma", index: "phone_list", title: "号码寻源" }
          ]
        },
        {
          type: 0,
          index: "5",
          class: "icon-yunyingbaobiao-",
          title: "运营管理",
          submenu: [
            {
              class: "icon-quanju_yunying",
              index: "all_run",
              title: "全局运营"
            },
            {
              class: "icon-chanpinbaobiao-",
              index: "product_report",
              title: "产品报表"
            },
            {
              class: "icon-app-report-file",
              index: "app_report",
              title: "APP报表"
            }
          ]
        }
      ],
      admininfo: {
        title: "基本信息",
        show: false
      },
      adminpassword: {
        title: "修改密码",
        show: false
      },
      menustate: "0",
      parent: "资源管理",
      child: "产品管理"
    };
  },
  components: {
    admininfo,
    adminpassword
  },
  methods: {
    changeMenu(parent, child) {
      //改变路由
      this.parent = parent;
      this.child = child;
    },
    exit() {
      //退出
      // this.$axios.get('/tx/logout')
      // .then(res => {});
      setTimeout(() => {
        this.$router.push({ name: "login" });
      }, 200);
    },
    modifyInfo() {
      //修改基本资料
      this.admininfo.show = true;
    },
    modifyPassword() {
      //修改密码
      this.adminpassword.show = true;
    },
    menuBtn() {
      this.admininfo = true;
    }
  },
  mounted() {
    this.link = this.$route.path.split("/")[1];
    var that = this
    window.addEventListener("load", function() {
      that.$router.push({ name: "sorce_list" });
      that.link = 'sorce_list';
    });
  },
  watch: {
    $route(to, from) {
      console.log(to.name);
      if(to.name === 'sorce_list') {
        this.link = to.name;
      }
    }
  }
};
</script>

<style scope>
html,
body {
  background: #fafafa;
}
.el-container {
  min-height: 100%;
}
.el-menu {
  border-right: none;
}
.bottom-box {
  width: 100%;
  min-height: 100%;
  /* top: 100px; */
}

.el-menu {
  height: 100%;
}
.wrap-rightbox {
  width: 100%;
  padding-left: 240px;
}
.headimg {
  width: 70px;
  height: 70px;
  margin: 20px auto;
  text-align: center;
  border-radius: 50%;
  border: #fff solid 2px;
  box-sizing: border-box;
  overflow: hidden;
}
.headimg img {
  width: 100%;
  height: 100%;
}
.head-text {
  color: #fafafa;
  margin-top: 16px;
  font-size: 15px;
  text-align: center;
}
.head-ad {
  font-size: 12px;
}
.modify-person {
  cursor: pointer;
}
.top-right {
  height: 100px;
  /* border-bottom: #f3f4f9 solid 1px; */
  background: #34abb5;
}
.top-title {
  font-size: 18px;
  color: #231815;
  font-weight: bold;
  line-height: 62px;
  margin-left: 30px;
}
.exit-box {
  float: right;
  overflow: hidden;
  color: #fff;
  margin-right: 30px;
  line-height: 40px;
}
.item {
  font-size: 25px;
  margin-top: 20px;
  cursor: pointer;
}
.el-badge__content {
  background-color: #fcb322;
  padding: 0 8px;
}
.exit {
  display: block;
  float: left;
  margin: 0 30px 0 40px;
  line-height: 62px;
  font-size: 16px;
  color: #231815;
  cursor: pointer;
}
.m-nav .el-badge__content.is-fixed {
  top: 3px;
  right: 15px;
}
.m-nav .el-dialog {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #303133;
}
.m-nav .el-dialog__header {
  display: none;
}
.m-nav .el-dialog__body {
  padding: 0;
}
.m-nav .el-loading-parent--relative {
  position: fixed !important;
}
.el-icon-arrow-down {
  display: none;
}
</style>